<template>
  <a-layout id="ExamList">
    <div class="pubCainter clear">
      <a-tree-select
        style="width: 210px;margin-left:5px;height:30px;"
        :treeData="eclassData"
        :value="eclassValue"
        @change="onChangeEclass"
        treeCheckable
        allowClear
        placeholder="全部类型"
      >
        <a-icon slot="suffixIcon" type="smile" />
      </a-tree-select>
      <a-tree-select
        style="width: 210px;margin-left:5px;height:30px;"
        :treeData="statusData"
        :value="statusValue"
        @change="onChangeStatus"
        treeCheckable
        allowClear
        placeholder="全部状态"
      >
        <a-icon slot="suffixIcon" type="smile" />
      </a-tree-select>
      <a-radio-group defaultValue="a" buttonStyle="solid" size="small" style="font-size:12px;" @change="changeDate">
        <a-radio-button value="a">今天</a-radio-button>
        <a-radio-button value="b">昨天</a-radio-button>
        <a-radio-button value="c">前天</a-radio-button>
        <a-radio-button value="d">7 天</a-radio-button>
      </a-radio-group>
      <span>从</span>
      <a-date-picker @change="ChangeStartDate" :defaultValue="startDate" :value="startDate" :defaultPickerValue="startDate" style="width:170px;"/>
      <span>到</span>
      <a-date-picker @change="ChangeEndDate" :defaultValue="endDate" :value="endDate" :defaultPickerValue="endDate" style="width:170px;"/>
      <a-input-search placeholder="请输入关键词" @search="onSearch" enterButton="搜索" style="width:230px;vertical-align: middle;margin-top:-2px;"/>
      <a href="javascript:;" style="margin-left:10px;">高级查询</a>
    </div>
    <div class="pubStatus clear">
        <a-radio-group :defaultValue="typeSize" buttonStyle="solid" size="large" @change="changeType">
          <a-radio-button value="1">全部的 <span>({{all_cnt}})</span></a-radio-button>
          <a-radio-button value="2">指派的 <span>({{mine_cnt}})</span></a-radio-button>
          <a-radio-button value="3">未撰写 <span>({{none_cnt}})</span></a-radio-button>
          <a-radio-button value="4">已检查 <span>({{exam_cnt}})</span></a-radio-button>
          <a-radio-button value="5">未审核 <span>({{ispass_cnt}})</span></a-radio-button>
          <a-radio-button value="6">未发布 <span>({{release_cnt}})</span></a-radio-button>
          <a-radio-button value="7">未打印 <span>({{isprint_cnt}})</span></a-radio-button>
          <a-radio-button value="8">已完成 <span>({{isfinish_cnt}})</span></a-radio-button>
          <a-radio-button value="9">回收站 <span>({{del_exam_cnt}})</span></a-radio-button>
        </a-radio-group>
    </div>
    <a-spin :spinning="spinning" tip="数据加载中，请稍候..." style="width:1500px;margin:0 auto;">
    <a-table
      :columns="columns"
      :dataSource="listData"
      :rowKey="setTableKey"
      :customRow="customClick"
      :rowSelection="rowSelection"
      class="listTable"
      bordered
      style="word-break:break-all;">

      <template slot="nameTags" slot-scope="text,record">
        {{record.patName}}
        <a-tag color="orange">{{record.patSex}} {{record.examPatAge}}</a-tag>
      </template>
      <template slot="examEclassTags" slot-scope="text,record">
        <a-tag color="green">{{record.examEclass}}</a-tag>
      </template>
      <template slot="examStatusTags" slot-scope="text,record">
        <a-tag color='#b5a083' v-if='record.examStatus == "00"'>取消检查</a-tag>
        <a-tag color='#999999' v-else-if='record.examStatus == "10"'>预约确认</a-tag>
        <a-tag color='#666666' v-else-if='record.examStatus == "20"'>已经报到</a-tag>
        <a-tag color='#444444' v-else-if='record.examStatus == "30"'>登记信息</a-tag>
        <a-tag color='#afddf7' v-else-if='record.examStatus == "40"'>叫号完成</a-tag>
        <a-tag color='#46d0e2' v-else-if='record.examStatus == "50"'>正在检查</a-tag>
        <a-tag color='#7090a9' v-else-if='record.examStatus == "55"'>正在传输</a-tag>
        <a-tag color='#e03e5e' v-else-if='record.examStatus == "57"'>传输失败</a-tag>
        <a-tag color='#27455d' v-else-if='record.examStatus == "60"'>收到影像</a-tag>
        <a-tag color='#ff5722' v-else-if='record.examStatus == "65"'>审核退回</a-tag>
        <a-tag color='#73e477' v-else-if='record.examStatus == "70"'>初步报告</a-tag>
        <a-tag color='#32bd37' v-else-if='record.examStatus == "80"'>审核报告</a-tag>
        <a-tag color='#09650c' v-else-if='record.examStatus == "90"'>发布报告</a-tag>
        <a-tag color='#033c05' v-else-if='record.examStatus == "95"'>报告打印</a-tag>
        <a-tag color='#dcb173' v-else>无效状态</a-tag>
      </template>
      <template slot="reportTags" slot-scope="text,record">
        <div v-if='record.reportDt == null'>
          <a-tag color='yellow'>未撰写</a-tag>
        </div>
        <div v-else>
          {{record.reportUserName}}
          <a-tag color='#2db7f5'>{{ForMatDate(record.reportDt.time)}}</a-tag>
        </div>
      </template>

      <template slot="verifyTags" slot-scope="text,record">
        <div v-if='record.verifyDt == null'>
          <a-tag color='yellow'>未撰写</a-tag>
        </div>
        <div v-else>
          {{record.verifyUserName}}
          <a-tag color='#108ee9'>{{ForMatDate(record.verifyDt.time)}}</a-tag>
        </div>
      </template>
      <template slot="huiTags" slot-scope="text,record">
        <div v-if='record.examRWrName != "" && record.examRWr != ""'>
          <a-tag color="#2484f2">会</a-tag>
        </div>
        <div v-else></div>
      </template>
      <template slot="fromTags" slot-scope="text,record">
          {{record.examTWrName}}
          <a-tag color="#2484f2">{{record.examReqDate}} {{record.examReqTime.substring(0,5)}}</a-tag>
          <span v-if='record.examStatus >= 70 && record.examStatus < 80'>
              <a-tag color="#73e477">已写</a-tag>
          </span>
          <span v-else-if='record.examStatus >= 80 && record.examStatus < 90'>
              <a-tag color="#73e477">已写</a-tag>
              <a-tag color="#32bd37">审核</a-tag>
          </span>
          <span v-else-if='record.examStatus >= 90 && record.examStatus < 95'>
              <a-tag color="#73e477">已写</a-tag>
              <a-tag color="#32bd37">审核</a-tag>
              <a-tag color="#09650c">发布</a-tag>
          </span>
          <span v-else-if='record.examStatus >= 95'>
              <a-tag color="#73e477">已写</a-tag>
              <a-tag color="#32bd37">审核</a-tag>
              <a-tag color="#09650c">发布</a-tag>
              <a-tag color="#033c05">打印</a-tag>
          </span>
          <span v-else></span>
      </template>
      <template slot="examOrgELevelFlags" slot-scope="text,record">
        <div :title="titleMsg" v-if='record.examOrgELevel == "急"'>
            <a-tag color="#f50">急</a-tag>
        </div>
        <div v-bind:title="titleMsg2" v-else v-bind:id="record.examId">
            <a-tag color="#108ee9" >普</a-tag>
        </div>

      </template>

      <template slot="controlMenu" slot-scope="text,record,index">
          <!-- <div @click.stop=""> -->
          <a-dropdown :trigger="['click']">
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="seeReport(record)"><a-icon type="tablet" />查看报告</a-menu-item>
              <a-menu-item key="2"><a-icon type="file-pdf" />PDF报告</a-menu-item>
              <a-menu-item key="3"><a-icon type="copy" />复制链接</a-menu-item>
              <a-menu-item key="4"><a-icon type="star" />收藏检查</a-menu-item>
              <a-menu-item key="5"><a-icon type="reconciliation" />上传影像图片</a-menu-item>
              <a-menu-item key="6"><a-icon type="interation" />修改报告时间</a-menu-item>
              <a-menu-item key="7"><a-icon type="project" />修改登记信息</a-menu-item>
              <a-menu-item key="8" @click="removeExam(record)"><a-icon type="delete" />删除登记信息</a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px" @click.stop="handleButtonClick">
              选择操作 <a-icon type="down" />
            </a-button>
          </a-dropdown>
          <!-- </div> -->

      </template>>

      <template slot="organNameTags" slot-scope="text,record">
        <!-- {{record.organName}} -->
        <template v-if='record.organName  !=  ""'>
          <template v-if="record.organName.indexOf(';') == -1">
              <template v-if="record.organName.indexOf('，') == -1">
                  <a-tag color="blue">{{record.organName}}</a-tag>
              </template>
              <template v-else>
                <a-tag v-for="item in record.organName.split('，')" color="blue" :key="item">{{item}}</a-tag>
              </template>
          </template>
          <template v-else>
            <a-tag v-for="item in record.organName.split(';')" color="blue" :key="item">{{item}}</a-tag>
          </template>
        </template>
        <template v-else></template>
      </template>
    </a-table>
    </a-spin>
  </a-layout>
</template>

<script>
import { TreeSelect,Modal } from "ant-design-vue";
import moment from 'moment';
import 'moment/locale/zh-cn';
import {GetDateStr,getExamStatusHtml,ForMatDate,ForMat} from '../resources/base.js';
import {URL,Login_key} from '../resources/url.js';
moment.locale('zh-cn');
import axios from 'axios';
import $ from 'jquery';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 10))

const eclassData = [
  {
    title: "X-RAY",
    value: "X-RAY",
    key: "0-0"
  },
  {
    title: "CT",
    value: "CT",
    key: "0-1"
  },
  {
    title: "MR",
    value: "MR",
    key: "0-2"
  },
  {
    title: "US",
    value: "US",
    key: "0-3"
  }
];

const statusData = [
  {
    title: "申请",
    value: "10",
    key: "1-0"
  },
  {
    title: "检查",
    value: "60",
    key: "1-1"
  },
  {
    title: "退回",
    value: "65",
    key: "1-2"
  },
  {
    title: "撰写",
    value: "70",
    key: "1-3"
  },
  {
    title: "审核",
    value: "80",
    key: "1-4"
  },
  {
    title: "发布",
    value: "90",
    key: "1-5"
  },
  {
    title: "打印",
    value: "95",
    key: "1-6"
  }
];

var datas = require('@/resources/list.json');

const columns = [{
  title: '检查号',
  dataIndex: 'examOrgENo',
  key: 'examOrgENo',
  align:'center',
  sort:true,
  width:120
}, {
  title: '来源',
  dataIndex: 'examPatSource',
  key: 'examPatSource',
  align:'center',
  width: 80,
  sort:true,
}, {
  title: '急缓',
  dataIndex: 'examOrgELevelFlags',
  scopedSlots:{customRender:'examOrgELevelFlags'},
  align:'center',
  width: 65,
  key: 'examOrgELevel',
  sort:true,
},
{
  title: '患者',
  dataIndex:'nameTags',
  scopedSlots:{customRender:'nameTags'},
  // customRender: (text, record) => {
  //   return `${record.patName} ${record.patSex} ${record.examPatAge}`;
  // },
  align:'center',
  width: 200,
  sort:true,
},
{
  title:'类型',
  dataIndex:'examEclassTags',
  scopedSlots:{customRender:'examEclassTags'},
  align:'center',
  width:80,
  sort:true,
  key:'examEclass'
},
{
  title: '状态',
  dataIndex:'examStatusTags',
  scopedSlots:{customRender:'examStatusTags'},
  align:'center',
  width: 80,
  sort:true,
},
{
  title:'检查部位',
  dataIndex:'organNameTags',
  scopedSlots:{customRender:'organNameTags'},
  align:'center',
  width:200,
  sort:true,
  key:'organName'
},
{
  title: '初步报告',
  dataIndex:'reportTags',
  scopedSlots:{customRender:'reportTags'},
  align:'center',
  width: 160,
  sort:true,
},
{
  title: '审核报告',
  dataIndex:'verifyTags',
  scopedSlots:{customRender:'verifyTags'},
  align:'center',
  width: 160,
  sort:true,
},
{
  title: '会诊',
  dataIndex:'huiTags',
  scopedSlots:{customRender:'huiTags'},
  align:'center',
  width: 70,
  sort:true,
},
{
  title: '来源',
  dataIndex:'fromTags',
  scopedSlots:{customRender:'fromTags'},
  align:'center',
  width: 240,
  sort:true,
},
{
  title: '操作',
  dataIndex:'controlMenu',
  scopedSlots:{customRender:'controlMenu'},
  align:'center',
  width: 70,
  sort:true,
},
];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};
export default {
  data() {
    return {
      titleMsg:'我是蔡五一，我很牛逼',
      titleMsg2:'我也是蔡一五，加油！',
      dynamicId:'0001010',
      customClick: record => ({
        on: { // 事件
          click: (e) => {
            alert(record.patName);
          },
        },
      }),
      spinning:true,
      eclassValue: [],
      statusValue: [],
      eclassData,
      statusData,
      SHOW_PARENT,
      size: "default",
      startDate:moment(GetDateStr(0), 'YYYY-MM-DD'),
      endDate:moment(GetDateStr(0), 'YYYY-MM-DD'),
      typeSize:'1',
      all_cnt:0,
      mine_cnt:0,
      none_cnt:0,
      exam_cnt:0,
      ispass_cnt:0,
      release_cnt:0,
      isprint_cnt:0,
      isfinish_cnt:0,
      del_exam_cnt:0,
      listData:[],
      html_exam_all:[],
      html_exam_mine:[],
      html_exam_none:[],
      html_exam_dicom:[],
      html_exam_ispass:[],
      html_exam_release:[],
      html_exam_isprint:[],
      html_exam_isfinish:[],
      html_exam_recycle:[],
      columns,
      rowSelection,
      ForMatDate
    };
  },
  created(){
    this.loadExamList(this.eclassValue,this.statusValue,'',GetDateStr(0),GetDateStr(0));
  },
  mounted(){
    console.log('我是你爸爸');
  },
  methods: {
    changeDate(e){
      var that = this;
      switch (e.target.value) {
        case 'a':
          that.startDate = moment(GetDateStr(0), 'YYYY-MM-DD');
          that.endDate = moment(GetDateStr(0), 'YYYY-MM-DD');
          break;
        case 'b':
           that.startDate = moment(GetDateStr(-1), 'YYYY-MM-DD');
          that.endDate = moment(GetDateStr(-1), 'YYYY-MM-DD');
          break;
        case 'c':
           that.startDate = moment(GetDateStr(-2), 'YYYY-MM-DD');
          that.endDate = moment(GetDateStr(-2), 'YYYY-MM-DD');
          break;
        case 'd':
           that.startDate = moment(GetDateStr(-7), 'YYYY-MM-DD');
          that.endDate = moment(GetDateStr(0), 'YYYY-MM-DD');
          break;
        default:
          break;
      }
      that.loadExamList(that.eclassValue,that.statusValue,'',ForMat(that.startDate),ForMat(that.endDate));
    },
    seeReport:(record)=>{
      console.log(record)
    },
    removeExam(rdata){
      var that = this;
      Modal.confirm({
        title: '删除提示',
        content: `您确定要删除关于${rdata.patName}的检查信息吗?`,
        okText:'确定',
        cancelText:'取消',
        closable:true,
        onOk() {
          // return new Promise((resolve, reject) => {
          //   setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
          // }).catch(() => console.log('Oops errors!'));
          const newData = that.listData.filter(item => item.examId !== rdata.examId);
          that.listData = newData;
          // 全部的
          that.html_exam_all = that.listData;
          that.all_cnt = that.all_cnt - 1;
          //指定给我的
          //未撰写
          if (rdata.oprRpt1 == "" || Number(rdata.examStatus) <= 65) {
              that.html_exam_none = that.listData;
              that.none_cnt = that.none_cnt - 1;
          }
          //已检查
          if (Number(rdata.examStatus) == 60) {
              that.html_exam_dicom = that.listData;
              that.exam_cnt = that.exam_cnt - 1;
          }
          //未审核
          if (Number(rdata.examStatus) > 65 && Number(rdata.examStatus) <= 70) {
              that.html_exam_ispass = that.listData;
              that.ispass_cnt = that.ispass_cnt - 1;
          }
          //未发布
          if (rdata.oprRpt2 != "" && Number(rdata.examStatus) > 70 && Number(rdata.examStatus) <= 80) {
              that.html_exam_release = that.listData;
              that.release_cnt = that.release_cnt - 1;
          }
          //未打印
          if (rdata.oprRpt2 != "" && Number(rdata.examStatus) > 80 && Number(rdata.examStatus) <= 90) {
              that.html_exam_isprint = that.listData;
              that.isprint_cnt = that.isprint_cnt - 1;
          }
          //已完成
          if (rdata.rptDownCnt > 0 || Number(rdata.examStatus) > 90 && Number(rdata.examStatus) <= 95) {
              that.html_exam_isfinish = that.listData;
              that.isfinish_cnt = that.isfinish_cnt - 1;
          }
        },
        onCancel() {},
      });
    },
    handleMenuClick(e) {
      switch (e.key) {
        case '1':
          alert('查看报告');
          break;
        case '2':
          alert('PDF报告');
          break;
        case '3':
          alert('复制链接');
          break;
        case '4':
          alert('收藏检查');
          break;
        case '5':
          alert('上传影像图片');
          break;
        case '6':
          alert('修改报告时间');
          break;
        case '7':
          alert('修改登记信息');
          break;
        case '8':
          alert('删除登记信息');
          break;
        default:
          break;
      }
    },
    handleButtonClick(e){

    },
    setTableKey(record){
      return record.examId
    },
    changeType(e){
        var that = this;
        that.typeSize = e.target.value;
        switch (e.target.value) {
          case '1':
            that.listData = that.html_exam_all;
            break;
          case '2':
            that.listData = that.html_exam_mine;
            break;
          case '3':
            that.listData = that.html_exam_none;
            break;
          case '4':
            that.listData = that.html_exam_dicom;
            break;
          case '5':
            that.listData = that.html_exam_ispass;
            break;
          case '6':
            that.listData = that.html_exam_release;
            break;
          case '7':
            that.listData = that.html_exam_isprint;
            break;
          case '8':
            that.listData = that.html_exam_isfinish;
            break;
          case '9':
            that.listData = that.html_exam_recycle;
            break;
          default:
            break;
        }
    },
    onChangeEclass(value) {
      console.log(value);
      this.eclassValue = value;
    },
    onChangeStatus(value) {
      console.log(value);
      this.statusValue = value;
    },
    ChangeStartDate(date, dateString) {
      console.log(dateString);
      this.startDate = moment(dateString, 'YYYY-MM-DD');
    },
    ChangeEndDate(date, dateString) {
      console.log(dateString);
      this.endDate = moment(dateString, 'YYYY-MM-DD');
    },
    loadExamList(eclassArr,statusArr,keyword,startD,endD){
      var that = this;
      that.spinning = true;
      var jsonstr = '{"key":"'+Login_key+'","params":{'+that.checkParams(eclassArr,statusArr,keyword,startD,endD)+'}}';
     $.post(URL.url_exam_qerlist,{json:jsonstr},function(data,status){
        if(status == 'success' && data.code == '200'){
          that.listData = [];
          that.all_cnt =0;
          that.mine_cnt = 0;
          that.none_cnt = 0;
          that.exam_cnt = 0;
          that.ispass_cnt = 0;
          that.release_cnt = 0;
          that.isprint_cnt = 0;
          that.isfinish_cnt = 0;
          that.del_exam_cnt = 0 ;
          that.html_exam_all = [];
          that.html_exam_mine = [];
          that.html_exam_ispass = [];
          that.html_exam_none = [];
          that.html_exam_dicom = [];
          that.html_exam_release = [];
          that.html_exam_isprint = [];
          that.html_exam_isfinish = [];
          that.html_exam_recycle = [];
          that.listData = data.data.examEntity;
          that.html_exam_all = data.data.examEntity;
          if(data.data.examEntity.length > 0){
            data.data.examEntity.forEach(rdata => {
              if (rdata.examStatus == '00') {
                  that.html_exam_recycle.push(rdata);
              } else {
                  //指定给我的
                  //未撰写
                  if (rdata.oprRpt1 == "" || Number(rdata.examStatus) <= 65) {
                      that.html_exam_none.push(rdata);
                  }
                  //已检查
                  if (Number(rdata.examStatus) == 60) {
                      that.html_exam_dicom.push(rdata);
                  }
                  //未审核
                  if (Number(rdata.examStatus) > 65 && Number(rdata.examStatus) <= 70) {
                      that.html_exam_ispass.push(rdata);
                  }
                  //未发布
                  if (rdata.oprRpt2 != "" && Number(rdata.examStatus) > 70 && Number(rdata.examStatus) <= 80) {
                      that.html_exam_release.push(rdata);
                  }
                  //未打印
                  if (rdata.oprRpt2 != "" && Number(rdata.examStatus) > 80 && Number(rdata.examStatus) <= 90) {
                      that.html_exam_isprint.push(rdata);
                  }
                  //已完成
                  if (rdata.rptDownCnt > 0 || Number(rdata.examStatus) > 90 && Number(rdata.examStatus) <= 95) {
                      that.html_exam_isfinish.push(rdata);
                  }
              }
          });
          }
          that.all_cnt = that.html_exam_all.length;
          that.mine_cnt = that.html_exam_mine.length;
          that.none_cnt = that.html_exam_none.length;
          that.exam_cnt = that.html_exam_dicom.length;
          that.ispass_cnt = that.html_exam_ispass.length;
          that.release_cnt = that.html_exam_release.length;
          that.isprint_cnt = that.html_exam_isprint.length;
          that.isfinish_cnt = that.html_exam_isfinish.length;
          that.del_exam_cnt = that.html_exam_recycle.length;
          switch (that.typeSize) {
          case '1':
            that.listData = that.html_exam_all;
            break;
          case '2':
            that.listData = that.html_exam_mine;
            break;
          case '3':
            that.listData = that.html_exam_none;
            break;
          case '4':
            that.listData = that.html_exam_dicom;
            break;
          case '5':
            that.listData = that.html_exam_ispass;
            break;
          case '6':
            that.listData = that.html_exam_release;
            break;
          case '7':
            that.listData = that.html_exam_isprint;
            break;
          case '8':
            that.listData = that.html_exam_isfinish;
            break;
          case '9':
            that.listData = that.html_exam_recycle;
            break;
          default:
            break;
        }
          that.spinning = false;
        }
      })
    },
    checkParams(eclassArr,statusArr,keyword,startD,endD){
      var params  = '"queryLevel":"1"';
      if(keyword.trim() != ''){
        params += ',"isAllTime":"yes"';
        params += ',"keyWord":"' + keyword.trim() + '"';
      }else{
        params += ',"startExamReqDate":"' + startD + '"';
        params += ',"endExamReqDate":"' + endD + '"';
      }

      params += ',"examTWrs":["00001375","00001528","00001254","00001051","00001479"]';
      params += ',"examRWrs":["00001375","00001528","00001254","00001051","00001479"]';
      if(eclassArr.length != 0){
          params += ',"examEclasss":' + JSON.stringify(eclassArr) + '';

      }
      if(statusArr.length != 0){
          params += ',"examStatuss":' + JSON.stringify(statusArr) + '';
      }
      return params;
    },
    onSearch (value) {
      var that = this;
      that.loadExamList(that.eclassValue,that.statusValue,value,ForMat(that.startDate),ForMat(that.endDate));
        },
      }
};
</script>

<style>
  .listTable{
    width: 1500px;
    margin: 0 auto;
    background: #ffff;
  }
</style>
